<script setup>
    
    /**
     * watch用法
     */
    // 监视ref数据
    const count = ref(1)
    watch(count, (newCount, oldCount) => {
        console.log(newCount, oldCount)
    })

    // 监视reactive数据
    const user = reactive({
        name: '张三',
        age: 18
    })
    watch(user, (newUser, oldUser) => {
        console.log(newUser, oldUser)
    }) // 自动启用深度监听

    /**
     * watchEffect用法
     * 1.不用直接指定要监视的数据，回调中使用到的数据会自动监视
     * 2.默认会在组件挂载时执行一次，初始化数据
     * 3.默认会在监视的数据发生改变时，再次执行回调
     */
    watchEffect(() => {
        console.log(count.value, user.name)
    })

    /**
     * 接收祖先传递过来的数据
     */
    const sex = inject('sex')


</script>

<template>  
    <p>{{ count }}</p>
    <button @click="count++">修改count</button>
    <hr>

    <p>{{ user.name }}</p>
    <button @click="user.name='李四'">修改user.name</button>
    <hr>

    <p>{{ sex }}</p>
</template>

<style scoped>

</style>